<template>
	<div>
		<Card :bordered="false" dis-hover class="infoBlock">
			<p slot="title">小额鉴权</p>
			<div class="tips">
				<Icon type="ios-checkmark-circle-outline" color="green" />商户进件材料已提交，请注意查看短信。根据信息提示，查询对公账户打款信息，在本页面完成企业小额验证
			</div>
			<Form :model="formTop" label-position="top" ref="formTop" :rules="formTopRules">
				<Row>
					<Col span="8">
					<FormItem label="小额金额" prop="amount">
						<Input search v-model="formTop.amount" enter-button="重新打款" placeholder="请输入" @on-search="handleSave" />
					</FormItem>
					</Col>
				</Row>
			</Form>
			<div class="tips" style="color:#2d8cf0">
				<Icon type="md-alert" color="#2d8cf0" />还剩余<span class="smallMoney_highlight">{{ 4 - Number($route.query.verifyNum ) }}</span>次小额鉴权机会，<span
				 class="smallMoney_highlight">{{9 - Number($route.query.restartNum)}}</span>次重新小额打款机会
			</div>
		</Card>
		<Row type="flex" justify="end" class="cert_opeation" align="middle">
			<Col> <Button type="primary" ghost @click="GiveUp">取消</Button></Col>
			<Col> <Button type="primary" @click="handleSave('confirm')">小额鉴权</Button></Col>
		</Row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formTop: {
					amount: ""
				},
				formTopRules: {
					amount: [{
						required: true,
						message: '输入金额'
					}]
				}
			}
		},
		methods: {
			GiveUp() {
				this.formTop.amount = "";
			},
			handleSave(query) {
				if (this.formTop.amount == '') {
					this.$Modal.warning({
						title: "提示",
						content: "输入必填项"
					});
				} else {
					let verType = query && query == 'confirm' ? 'verify' : 'again';
					let data = {};
					data.instanceId = this.$route.query.instanceId;
					data.amount = this.formTop.amount;
					data.number = this.$route.query.number;
					data.verCode = "123456";
					data.verType = verType;
					data.client = "pc";
					this.$ajax.post(this, this.$api.POST_SMALL, data, (res) => {
						if (res != undefined && res.code == "200") {
							this.getStatus();
						}else {
							this.$Modal.error({
								title: "提示",
								content:res.msg
							});
						}
					});
				}
			},
			getStatus() {
				let datas = {
					instanceId: this.$route.query.instanceId,
					number: this.$route.query.number
				}
				this.$router.push({
					name: "Error",
					query: {
						formdatas: JSON.stringify(datas),
					}
				})
			}
		}

	}
</script>

<style scoped>
	.tips {
		margin: 5px 0;
	}

	.smallMoney_highlight {
		color: red;
	}

	.cert_opeation {
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: 100%;
		size: 20;
		background: white;
		height: 80px;
		padding: 0 10px;
		-moz-box-shadow: 0px -3px 4px #CCCCCC;
		-webkit-box-shadow: 0px -3px 4px #CCCCCC;
		box-shadow: 0px -3px 4px #CCCCCC;
	}

	.cert_opeation button {
		margin-left: 10px;
	}
</style>
